<template>
    <div class="faq-content">
        <img class="banner" :src="banner" alt="">
        <div class="container minh800">
            <ul class="tab-bar">
                <li v-for="(item,i) in tabCfg" 
                    :key='item.id'
                    v-text='$t(item.i18nKey)||item.title'
                    :class='currentId==item.id?"active":""'
                    @click='onTabChange(item.id,i)'>
                </li>
            </ul>
            <ul class="q-list">
                <template v-for="(item,i) in qList">
                  <li class="flex flex-between flex-v-center" 
                    :key='i'
                    @click='navigateTo("/notice/detail",{i18nKey:currentTab.i18nKey,type:currentId,qid:item.id})'>
                    <p class="font-16">{{item.title}} <span class="m-left-10 font-12">{{item.wdate}}</span> </p>
                    <i class="el-icon-arrow-right font-16"></i>
                  </li>
                </template>
            </ul>
        </div>
    </div>
</template>
<script>
import questionModel from "@/model/questionModel";
let { faqList } = questionModel;
export default {
  data() {
    return {
      banner: require("@/assets/images/help/bangzhu_banner.png"),
      currentId: 1,
      currentItem: null,
      tabCfg: [
        {
          i18nKey: "anouncement",
          id: "1",
          label: "系统公告"
        },
      ],
      currentTab: null,
      qList: null
    };
  },
  mounted() {
    this.currentTab = this.tabCfg[0];
    // this.getQuestionList();
  },
  methods: {
    onTabChange(id, index) {
      this.currentId = id;
      this.currentTab = this.tabCfg[index];
    },
    getQuestionList(type) {
      if (faqList) {
        this.qList = faqList;
      } else {
        this.request(this.api.getnotice,{pagesize:'30',pagecode:'1'}).then(res => {
          console.log(`问题列表:${JSON.stringify(res)}`);
          if (res && res.code != "0") return this.getDataFaild(res.msg);
          res.data &&
            res.data[0] &&
            (this.qList = questionModel.faqList = res.data);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 76%;
  margin: 20px auto 0 auto;
  .tab-bar {
    @include textVcenter(60px);
    border-top: $txt-tips;
    border-left: $txt-hui;
    li {
      position: relative;
      top: -1px;
      height: 100%;
      box-sizing: border-box;
      float: left;
      background: #fafafa;
      padding: 0 27px;
      border: $default-border;
      border-left: none;
      &.active {
        border-bottom: none;
        border-top: 2px solid $color-danger;
        background: #fff;
      }
    }
  }
  .q-list {
    @include textVcenter(40px);
    li {
      border-bottom: #414141;;
      color: #fafafa;
      padding: 0 10px;
      &:hover {
        cursor: pointer;
        background: #353232;
      }
      span {
        font-weight: 500;
      }
    }
  }
}
.minh800{
    min-height: 800px;
}
.faq-content{
  .banner{width: 100%;}
}
</style>
